<!--添加修改角色信息-->
<template>
  <a-modal v-model="showAddTable" :mask-closable="false" :closable="false" :width="1000"
           title="队伍成员"
           :maskClosable="false"
           :destroyOnClose="true">
    <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
      <a-row>
        <a-col span="12">
          <a-form-item label="专业：" prop="name" v-bind="formStyle">
            <a-select
                placeholder="请选择专业" v-model="selectMajorId"
                v-decorator="['selectMajorId', { rules: [{ required: true, message: '选择专业' }] }]"
                @select="changeMajorList"

            >
              <a-select-option v-for="item in majorSelectList" :value="item.value"
                               :key="item.value">{{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-form-item label="班级：" prop="name" v-bind="formStyle">
            <a-select
                placeholder="请选择班级" v-model="selectClassId"
                v-decorator="['selectClassId', { rules: [{ required: true, message: '选择班级' }] }]"
                @select="changeClassList"

            >
              <a-select-option v-for="item in classSelectList" :value="item.value"
                               :key="item.value">{{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col span="12">
          <a-form-item label="学生：" prop="name" v-bind="formStyle">
            <a-select
                placeholder="请选择学生" v-model="selectStuId"
                v-decorator="['selectStuId', { rules: [{ required: true, message: '选择学生' }] }]"
                @select="changeStuList"

            >
              <a-select-option v-for="item in studentSelectList" :value="item.value"
                               :key="item.value">{{ item.label }}
              </a-select-option>
            </a-select>
          </a-form-item>
        </a-col>
        <a-col span="12">
          <a-button type="primary" size="default" @click="addTeamPerson()">添加队员</a-button>
        </a-col>
      </a-row>

      <a-table :columns="columns" :dataSource="detail" :rowKey="record => record.index" style="height: 300px;overflow-y: auto"
               :pagination="false">
        <span slot="sex" slot-scope="text, record, index">
          {{text === '0'?'女':(text === '1'?'男':'未知')}}
        </span>
        <span slot="operation" slot-scope="text, record, index" class="table-operation">
                        <a @click="removeTeamPerson(index)">
                                          删除</a>
                </span>
      </a-table>
    </a-form>
    <div slot="footer">
      <a-button type="default" size="default" @click="cancelApply()">取消</a-button>
      <a-button type="primary" size="default" @click="saveApply()">确定</a-button>
    </div>
  </a-modal>
</template>

<script>
import verify from 'libs/verify'
import AFormItem from 'ant-design-vue/es/form/FormItem'

export default {
  name: 'addTeamPerson',
  components: {
    AFormItem,
  },
  data() {
    return {
      verify,
      form: this.$form.createForm(this),
      showAddTable: false,
      input: false,
      selectMajorId: "",
      selectClassId: "",
      selectStuId: "",
      majorObj: {},
      classObj: {},
      stuObj: {},
      rowIndex: 10,
      selectedStudentIdList: [],
      detail:[],

      detailObj:{
        rowIndex:0,
        name:'',
        stuId:'',
        stuCode:'',
        majorId:'',
        majorName:'',
        classId:'',
        className:'',
        sex:'',
        phone:'',
      },
      columns: [
        {title: '专业', dataIndex: 'majorName', key: 'majorName'},
        {title: '班级', dataIndex: 'className', key: 'className', width: '15%'},
        {title: '姓名', dataIndex: 'name', key: 'name', width: '15%'},
        {title: '学号', dataIndex: 'stuCode', key: 'stuCode', width: '15%'},
        {title: '性别', dataIndex: 'sex', key: 'sex', width: '8%',scopedSlots: {customRender: 'sex'}},
        {title: '联系方式', dataIndex: 'phone', key: 'phone', width: '15%'},
        {title: '操作', key: 'operation', width: '10%', scopedSlots: {customRender: 'operation'}}
      ],
    }
  },
  computed: {
    majorSelectList() {
      return this.$store.state.courseManage.majorSelectList
    },
    classSelectList() {
      return this.$store.state.courseManage.classSelectList
    },
    studentSelectList() {
      return this.$store.state.courseManage.studentSelectList
    },
    formStyle() {
      return this.$store.state.common.formStyle
    }
  },
  props: {
    objDTO: {
      type: Object,
      required: true
    }
  },
  watch: {},
  methods: {
    /**
     * Function    : saveApply
     * Description : 打开弹框
     * Input       : none
     * Return      : none
     */
    showModal() {
      this.showAddTable = true
    },
    /**
     * Function    : showEdit
     * Description : 编辑时显示
     * Input       : opt单个所有数据
     * Return      : none
     */
    showEdit(opt) {
      let _this = this;
      this.showAddTable = true
      this.id = opt.recordId
      _this.detail=[]
      this.initData()
      _this.$store.dispatch('getTeamInfoAct', {recordId: opt.recordId}).then(response => {
        let orderInfo = {}
        if (response.code === 0) {
          orderInfo = response.data
          _this.detail = orderInfo.detail
          _this.detail.filter(item => _this.selectedStudentIdList.push(item.stuId))
        } else {
          _this.$message.error(response.message)
        }
      })
    },

    changeMajorList(value) {
      let _this = this;
      this.selectMajorId = value
      this.getClassList(value)
      let majorSelectList = _this.majorSelectList;
      for (let index in majorSelectList) {
        if (majorSelectList[index].value === value) {
          let majorObj = majorSelectList[index].record
          this.majorObj = majorObj;
          return
        }
      }
    },
    changeClassList(value) {
      let _this = this;
      this.selectClassId = value
      this.getStudentList(value)
      let classSelectList = _this.classSelectList;
      for (let index in classSelectList) {
        if (classSelectList[index].value === value) {
          let classObj = classSelectList[index].record
          this.classObj = classObj;
          return
        }
      }
    },
    changeStuList(value) {
      let _this = this;
      let studentSelectList = _this.studentSelectList;
      for (let index in studentSelectList) {
        if (studentSelectList[index].value === value) {
          let stuObj = studentSelectList[index].record
          this.stuObj = stuObj;
          return
        }
      }
    },
    addTeamPerson() {
      let _this = this;
      this.form.validateFields((err, value) => {
            if (!err) {

              let stuObj = this.stuObj
              let classObj = this.classObj
              let majorObj = this.majorObj
              if (_this.selectedStudentIdList.filter(value1 => value1 === stuObj.id).length > 0) {
                this.$message.error("不可添加相同成员")
                return
              }
              this.detailObj = {
                rowIndex: this.rowIndex,
                name: stuObj.name,
                stuId: stuObj.id,
                stuCode: stuObj.userName,
                majorId: majorObj.id,
                majorName: majorObj.name,
                classId: classObj.id,
                className: majorObj.name,
                sex: stuObj.sex,
                phone: stuObj.phoneNum,
                teamId: this.id,
              }
              _this.rowIndex = this.rowIndex + 1
              _this.detail.push(this.detailObj)
              _this.selectedStudentIdList.push(stuObj.id)
              _this.selectStuId = ""
              _this.stuObj = undefined
              setTimeout(function () {
                _this.form.resetFields(['selectStuId'])
              }, 100)
            }
      })
    },
    removeTeamPerson(index){
      if (this.detail.length > 0) {
        this.detail.splice(index, 1)
      }
    },

    /**
     * Function    : saveApply
     * Description : 角色信息新增、编辑保存
     * Input       : name
     * Return      : none
     */
    saveApply() {
        if (this.detail && this.detail.length > 0) {
          let para = {...this.objDTO}
          para.detail = this.detail
          this.$store.dispatch('saveTeamAct', para).then(response => {
            if (response.code === 0) {
              this.$emit('init')
              this.$message.success(response.message)
            } else {
              this.$message.error(response.message)
            }
          })
        }else {
          this.$message.error("请至少添加一位成员")
        }
    },

    /**
     * Function    : cancelApply
     * Description : 取消弹出框
     * Input       : val
     * Return      : none
     */
    cancelApply() {
      this.showAddTable = false
      let _this = this
      setTimeout(function () {
        _this.form.resetFields()
      }, 100)
    },
    initData() {
      this.$store.dispatch('getMajorSelectListAct', {})
    },
    getClassList(majorId) {
      let para = {majorId: majorId}
      this.$store.dispatch('getClassSelectListAct', para)
    },
    getStudentList(classId) {
      let para = {classId: classId}
      this.$store.dispatch('getStudentSelectListAct', para)
    },

  },

created() {

}
}
</script>
